<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@taglib uri="/struts-tags" prefix="s"%>  
<%@taglib uri="http://displaytag.sf.net" prefix="display" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src = "./scripts/jquery.js"></script>
<script type="text/javascript" src = "./scripts/jquery-ui.js"></script>
<style>
body, input{
font-family: Calibri, Arial;
}
table#contact {
border-collapse: collapse;
width:550px;
}
th {
height: 40px;
background-color: #AAB6B3;
}
</style>

</head>
<body>
<h1>SEARCH</h1>


<s:form action="search.action" method="post" id="form">
<s:textfield name="contact.firstName" label="Firstname"/>
<s:textfield name="contact.lastName" label="Lastname"/>
<s:hidden name = "inActive" id="inActive" value = "%{#inActive}" />
<s:checkbox name="checkbox" id="checkbox" onclick="activeRow()" label="Include inActive?"/>
<s:submit value="Search" align="center"/>
<table>
<tr>
<th></th>
<th> <input type="button" value="Last Name"  onclick="sort(this)" id="button"> </th>
<th> <input type="button" value="First Name"  onclick="sort(this)" id="button"> </th>
<th> <input type="button" value="Email"  onclick="sort(this)" id="button"> </th>
<th> <input type="button" value="Cell Phone"  onclick="sort(this)" id="button"> </th>
<th> <input type="button" value="Birth Date"  onclick="sort(this)" id="button"> </th>
<th> <input type="button" value="Active"  onclick = "sort(this)" id="button"> </th>
<th> <input type="hidden" name="order" id="hidden"> </th>
</tr>
<s:iterator value="contactList" var="contact">
<tr>

<td> <input type="radio" id = "select" name="contact.id" value = "<s:property value="%{#contact.id}"/>" class="select" onclick="getSelectedRow()"> </td>
<td><s:property value="%{#contact.lastName}" /></td>
<td><s:property value="%{#contact.firstName}" /></td>
<td><s:property value="%{#contact.emailId}" /></td>
<td><s:property value="%{#contact.cellNo}" /></td>
<td><s:property value="%{#contact.birthDate}" /></td>
<td><s:property value="%{#contact.isActive}" /></td>
</tr>
</s:iterator>
<tr>
<th><input type="button"  value="Next" id="next" onclick="nextPage()"></th>
<th><s:textfield name = "currentPage" id="currentpage"/></th>
<th><input type="button" value="Previous" id="previous" onclick="previousPage()"></th>
</tr>
</table>
</s:form>


<h2>Records</h2>
<table id="contact" border="1">
<tr>
<th> <input type="button" value="Delete" onclick="deleteRow()"> </th>
<th> <input type="button" value="Add" onclick="addRow()"> </th>
<th> <input type="button" value="Edit" onclick="editRow()"> </th>
<th> <input type="button" value="None" onclick="clearRadio()"> </th>
<th> <input type="button" value="Clear" onclick="clearSearch()"> </th>
<th> <input type="button" value="Select" onclick = "selectObject()"> </th>
</tr>
</table>

<display:table export="true" id="contactList" name="contactList" requestURI="" class="ContactAction" pagesize="3">
<display:column> 
<input type="radio" id = "select" name="selected" value = "${contactList.id}" class="select" onclick="getSelectedRow()">
</display:column>
<display:column property="lastName" sortable="true" title="Last Name"/>
<display:column property="firstName" sortable="true" title="First Name"/>
<display:column property="emailId" sortable="true" title="Email"/>
<display:column property="cellNo" sortable="true" title="Cell Phone"/>
<display:column property="birthDate" sortable="true" title="BirthDate"/>
<display:column property="isActive" sortable="true" title="Is Active"/>
</display:table>

<script type="text/javascript">
 function deleteRow(){
	if(getSelectedRow() ==null){
		alert("Invalid");
	}else{
	//alert(getSelectedRow());
	window.location = "delete.action?id=" + getSelectedRow();}
	//document.forms.submit();
	//alert("Chao Nhat");
}

function sort(th){
	//alert(th.value);
	$("#hidden").val(th.value);
	//alert($("#hidden").val());
	document.forms["form"].submit();
} 

function nextPage(){
	//alert("Dsdsdsd");
	var dem1 = $("#currentpage").val();
	//alert(dem1);
	var dem = parseInt(dem1,10) + 1;
	 
	//alert(dem);
	 $("#currentpage").val(dem);
	document.forms["form"].submit();
}

 function previousPage(){
	//alert($("#currentpage").val());
	if($("#currentpage").val() == 1){
		alert("Invalid");
	}else{
		var dem = parseInt($("#currentpage").val(),10)-1;
		$("#currentpage").val(dem);
		document.forms["form"].submit();
	}
		
	
} 

function addRow(){
window.location = "create.action";
}

function editRow(){
	//alert(getSelectedRow());
	if(getSelectedRow() == null){
		alert("Invalid");
	}else{
	window.location = "edit.action?id=" + getSelectedRow();}
}

function getSelectedRow(){
	if($("input[type='radio'].select").is(':checked')){
		//alert($("input[type='radio'].select:checked").val());
		return($("input[type='radio'].select:checked").val());
	}
}
function clearRadio(){

	$("input:radio").attr("checked", false);
	
}

function clearSearch(){
	//alert("dsds");
	$("input[type='text']").val('');
}

function selectObject(){
	var selvalue = getSelectedRow();
	window.opener.document.getElementById('selected').value = selvalue;
	
	window.close();
	}

function activeRow(){
	if($("#checkbox").is(':checked')){
		$("#inActive").val(true);}else{
			$("#inActive").val(false);
		}
	//alert($("#inActive").val());
}


 $(document).ready(
		function() {
			//alert($("#inActive").val());
			if($("#inActive").val()){
				$('input[name=checkbox]').attr('checked',true);
			}else if(!($("#inActive").val())){}
			else{
			$("#inActive").val(false);}
		});
</script>
</body>
</html>